<template>
    <view class="work-container">
        <!-- 轮播图部分 -->
        <uni-swiper-dot class="uni-swiper-dot-box" :info="banners" :current="current" field="content">
            <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
                <swiper-item v-for="(item, index) in banners" :key="index">
                    <view class="swiper-item" @click="clickBannerItem(item)">
                        <image :src="item.image" mode="aspectFill" :draggable="false" />
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>

        <!-- 宫格组件 -->
        <uni-section title="系统管理" type="line"></uni-section>
        <view class="grid-body">
            <uni-grid :column="4" :showBorder="false">
                <uni-grid-item v-for="(item, idx) in gridData" :key="idx">
                    <view class="grid-item-box" @click="handleGridClick(item)">
                        <uni-icons :type="item.icon" size="30" :color="item.color"></uni-icons>
                        <text class="text">{{ item.text }}</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </view>
    </view>
</template>

<script>
import { scan } from '@/api/tools/scan';
export default {
    data() {
        return {
            current: 0,
            swiperDotIndex: 0,
            banners: [{ image: '/static/images/banner/banner01.jpg' }, { image: '/static/images/banner/banner02.jpg' }, { image: '/static/images/banner/banner03.jpg' }],
            // 动态宫格数据，增加color属性
            gridData: [ 
                {
                    icon: 'scan',
                    text: '扫码测试',
                    click: 'scanCode',
                    color: '#007AFF'
                },
                {
                    icon: 'wallet-filled',
                    text: '日志管理',
                    click: 'changeGrid',
                    color: '#FF9500'
                },
                {
                    icon: 'calendar',
                    text: '日程管理',
                    click: 'changeGrid',
                    color: '#22a6b3'
                },
                {
                    icon: 'chatboxes-filled',
                    text: '消息管理',
                    click: 'changeGrid',
                    color: '#4CD964'
                },
                {
                    icon: 'location-filled',
                    text: '位置管理',
                    click: 'changeGrid',
                    color: '#95afc0'
                },
                {
                    icon: 'email-filled',
                    text: '邮件管理',
                    click: 'changeGrid',
                    color: '#e74c3c'
                },
                {
                    icon: 'gear-filled',
                    text: '系统设置',
                    click: 'changeGrid',
                    color: "#bdc3c7"
                },
                {
                    icon: 'person',
                    text: '个人中心',
                    click: 'goProfile',
                    color: '#82C8EC'
                }
                // 你可以继续添加更多宫格!
            ]
        };
    },
    methods: {
        clickBannerItem(item) {
            console.info(item);
        },
        changeSwiper(e) {
            this.current = e.detail.current;
        },
        changeGrid() {
            // 你这里可以自定义自己的逻辑
            this.$modal ? this.$modal.showToast('模块建设中~') : uni.showToast({ title: '模块建设中~', icon: 'none' });
        },
        scanCode() {
            uni.scanCode({
                success: (res) => {
                    console.log('条码字符：' + res.charSet);
                    console.log('条码类型：' + res.scanType);
                    console.log('条码内容：' + res.result);
                    scan(res.scanType, res.result, res.charSet);
                }
            });
        },
        handleGridClick(item) {
            if (typeof this[item.click] === 'function') {
                this[item.click]();
            } else {
                this.$modal && this.$modal.showToast ? this.$modal.showToast('无效操作') : uni.showToast({ title: '无效操作', icon: 'none' });
            }
        },
        goProfile() {
            // 这里写跳转个人中心逻辑
            // uni.showToast({ title: '个人中心~', icon: 'none' });
            uni.showLoading({ title: '加载中' });
            setTimeout(() => {
                uni.hideLoading();
                uni.switchTab({
                    url: '/pages/mine/index'
                });
            }, 2000);
        }
    }
};
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
}
view {
    font-size: 14px;
    line-height: inherit;
}
/* #endif */
.text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
}
.grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}
.uni-margin-wrap {
    width: 690rpx;
    width: 100%;
}
.swiper {
    height: 300rpx;
}
.swiper-box {
    height: 150px;
}
.swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
}
@media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
        width: 400px;
        /* #ifndef APP-NVUE */
        margin: 0 auto;
        /* #endif */
        margin-top: 8px;
    }
    .image {
        width: 100%;
    }
}
</style>
